<template>
  <a-modal
    class="pay-modal"
    v-model="payShow"
    :title="null"
    :footer="null"
    :closable="false"
    :bodyStyle="{padding:0}"
    width="960px">
    <div class="modal-content ">
      <div class="modal-vip">
        <div><p class="modal-vip-title">千元VIP礼包</p>
          <p class="modal-vip-desc">开通小裂变年费会员即可免费领取</p></div>
        <div class="modal-vip-all modalscroole">
          <div class="modal-vip-list"><img
                                        src="../assets/hddxlogo.png"
                                        class="hzhb-vip-logo">
            <div class="hzhb-vip-name">混沌大学</div>
            <div class="hzhb-vip-desc">混沌大学营销课程礼包</div>
          </div>
          <div class="modal-vip-list"><img
                                        src="../assets/hddxlogo.png"
                                        alt=""
                                        class="hzhb-vip-logo">
            <div class="hzhb-vip-name">媒老板商学院</div>
            <div class="hzhb-vip-desc">《12招掌握微信引流与成交》</div>
          </div>
          <div class="modal-vip-list"><img
                                        src="../assets/hddxlogo.png"
                                        alt=""
                                        class="hzhb-vip-logo">
            <div class="hzhb-vip-name">插坐学院</div>
            <div class="hzhb-vip-desc">任选三门《升职加薪课》</div>
          </div>
          <div class="modal-vip-list"><img
                                        src="../assets/hddxlogo.png"
                                        alt=""
                                        class="hzhb-vip-logo">
            <div class="hzhb-vip-name">鸟哥笔记</div>
            <div class="hzhb-vip-desc">《私域流量与新社交红利》</div>
          </div>
          <div class="modal-vip-list"><img
                                        src="../assets/hddxlogo.png"
                                        alt=""
                                        class="hzhb-vip-logo">
            <div class="hzhb-vip-name">半撇私塾</div>
            <div class="hzhb-vip-desc">《从0打造抖音百万短视频IP》</div>
          </div>
          <div class="modal-vip-list"><img
                                        src="../assets/hddxlogo.png"
                                        alt=""
                                        class="hzhb-vip-logo">
            <div class="hzhb-vip-name">稿定设计</div>
            <div class="hzhb-vip-desc">稿定设计15天会员</div>
          </div>
          <div class="modal-vip-list"><img
                                        src="../assets/hddxlogo.png"
                                        alt=""
                                        class="hzhb-vip-logo">
            <div class="hzhb-vip-name">西瓜助手</div>
            <div class="hzhb-vip-desc">7天西瓜助手会员使用权</div>
          </div>
          <div class="modal-vip-list"><img
                                        src="../assets/hddxlogo.png"
                                        alt=""
                                        class="hzhb-vip-logo">
            <div class="hzhb-vip-name">问卷网</div>
            <div class="hzhb-vip-desc">30天问卷网高级会员</div>
          </div>
          <div class="modal-vip-list"><img
                                        src="../assets/hddxlogo.png"
                                        alt=""
                                        class="hzhb-vip-logo">
            <div class="hzhb-vip-name">Get写作</div>
            <div class="hzhb-vip-desc">21天个人VIP使用权</div>
          </div>
          <div class="modal-vip-list"><img
                                        src="../assets/hddxlogo.png"
                                        alt=""
                                        class="hzhb-vip-logo">
            <div class="hzhb-vip-name">图虫创意</div>
            <div class="hzhb-vip-desc">14天图虫创意惠选图库会员</div>
          </div>
        </div>
        <div class="modal-bot"><img
                                 src=""
                                 alt=""
                                 class="modal-bot-yinh">
          <div class="modal-bot-line"></div>
          <div class="bodal-bot-content">小裂变联合10余家课程、工具方，为年费会员客户提供精选运营课程、运营工具会员，帮助合作伙伴及团队进一步提升运营工作效率！
          </div>
        </div>
      </div>
      <div class="gettop">
        <div v-if="loading" class="d-jcc-aic loading-pay">
          <a-spin tip="Loading..."/>
        </div>
        <div class="getheader">
          <div class="getorder">订单详情</div>
          <img
            src=""
            alt=""
            class="getheadercha"
            @click="hide"></div>
        <div style="padding: 0px 0px 20px;">
          <div>
            <div class="cpanp">
              <div class="cpanp-left">
                <div class="cpanp-name">产品版本&nbsp;&nbsp;:&nbsp;&nbsp;<span>{{ product.productName }}</span>
                </div>
                <div class="cpanp-name">
                  账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号&nbsp;&nbsp;:&nbsp;&nbsp;<span>{{ product.username }}</span>
                </div>
                <div class="cpanp-name">购买时长&nbsp;&nbsp;:&nbsp;&nbsp;<span
                >一年</span></div>
                <div class="cpanp-name">创建时间&nbsp;&nbsp;:&nbsp;&nbsp;<span>{{ getTime(product.createTime) }}</span>
                </div>
                <div class="cpanp-name mtop">支付方式&nbsp;&nbsp;:&nbsp;
                  <img
                    alt=""
                    src=""
                    class="weichatpay">
                  微信支付
                </div>
                <div class="cpanp-name mtop">应付金额&nbsp;&nbsp;:&nbsp;
                  <span class="buy-paymoney">{{ formatPrice(product.price) }}元</span>
                  <del class="buy-oldmoney ml-10">原价:{{ formatPrice(product.oldPrice) }}元</del>
                </div>
              </div>
              <div class="cpanp-right">
                <div><img
                  alt=""
                  :src="qrCode"
                  class="buy-qrcode"></div>
                <div class="qrcode-sao">请使用微信【扫一扫】扫码支付</div>
              </div>
            </div>
            <div class="modal-link"></div>
            <div class="zhifurenz">
              <div>
                <div class="zhifuall"><img
                                        src=""
                                        alt=""
                                        class="zhifudun">
                  <div class="zhidusan">微信第三方认证服务商</div>
                </div>
                <div class="getqiangjin">强劲实力 客户信赖之选</div>
              </div>
              <div class="zhifulogo"><img
                src="../assets/fulilogo.8c54377.svg"
                alt=""></div>
            </div>
            <div class="prbuttons">
              <a-button type="button" class="ant-btn ant-btn-primary" @click="hide"><span>确 认</span></a-button>
            </div>
          </div>
        </div>
        <div></div>
      </div>
    </div>
    <x-qr-code
      ref="qrCode"
      @openQrCode="openQrCode"
      :style="{
        maxWidth: '300px',
        maxHeight: '300px',
      }"/>
  </a-modal>

</template>

<script>
  import API from '../../../../api/product'
  import store from '../../../../store'
  import XQrCode from '../../../components/XQrCode'

  export default {
    name: 'PayModal',
    components: { XQrCode },
    props: {
      code: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        payShow: false,
        qrCode: null,
        timer: null,
        orderNo: '',
        product: {
          price: 0,
          oldPrice: 0,
          createTime: null
        },
        loading: true
      }
    },
    computed: {
      qwUserId () {
        return this.$store.state.user.info.qwUserId
      },
      nickname () {
        return this.$store.state.user.info.nickname
      }
    },
    methods: {
      getTime (time) {
        return this.$Utils.getTimeFormat(time)
      },
      formatPrice (price) {
        return this.$Utils.keepN(price / 100)
      },
      hide () {
        this.payShow = false
        this.clear()
      },
      clear () {
        clearInterval(this.timer)
      },
      show (suite) {
        this.payShow = true
        this.pay()
      },
      pay () {
        this.clear()
        API.createOrder({ code: this.code, qwUserId: this.qwUserId }).then(res => {
          this.orderNo = res.orderNo
          this.product = Object.assign({}, res)
          setTimeout(() => {
            this.$refs.qrCode.generate(res.codeUrl)
          }, 200)
        }).catch(() => {
          this.$message.error('创建订单失败，请刷新重试！')
        })
      },
      openQrCode (image) {
        this.qrCode = image
        this.loading = false
        if (this.orderNo && image) {
          this.timer = setInterval(() => {
            this.check()
          }, 5000)
        }
      },
      check () {
        // 返回状态UNPAY待支付 FINISH支付完成  CANCEL 取消支付
        API.checkOrder({ orderNo: this.orderNo, qwUserId: this.qwUserId }).then(res => {
          const self = this
          if (res === 'UNPAY') {
          } else if (res === 'FINISH') {
            this.clear()
            this.$success({
              title: '提示',
              content: '购买成功',
              okText: '好',
              onOk: () => {
                store.dispatch('GetInfo')
                self.$router.push({
                  path: '/product/my'
                })
              }
            })
          } else {
            this.clear()
            this.$message.error('出错了，请稍后再试')
          }
        }).catch(() => {
          this.clear()
          this.$message.error('出错了，请稍后再试')
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .pay-modal {
    .modal-content {
      width: 960px;
      height: 530px;
      background-color: #fff;
      border-radius: 2px;
      z-index: 10011;
      display: flex;
      flex-direction: row;
    }

    .modal-vip {
      width: 344px;
      min-width: 344px;
      background-color: #de1f26;
      height: 530px;
      text-align: center;
    }

    .modal-vip-title {
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      color: #fff;
      opacity: 1;
      padding-top: 20px;
    }

    h2, p {
      padding: 0;
      margin: 0;
    }

    .modal-vip-desc {
      font-size: 12px;
      font-weight: 400;
      line-height: 24px;
      color: #fff;
      opacity: 1;
      margin-bottom: 24px;
    }

    .modal-vip-all {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      height: 300px;
      width: 100%;
      white-space: nowrap;
      overflow-x: hidden;
      overflow-y: auto;
      text-overflow: ellipsis;
    }

    .modal-vip-list {
      width: 160px;
      height: 100px;
      text-align: center;
    }

    .hzhb-vip-logo {
      width: 24px;
      height: 24px;
    }

    .hzhb-vip-name {
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      line-height: 12px;
      margin-top: 12px;
    }

    .hzhb-vip-desc {
      font-size: 12px;
      margin-top: 10px;
      font-weight: 400;
      line-height: 12px;
      color: #fff;
      opacity: 1;
    }

    .modal-bot {
      padding: 0 20px;
    }

    .modal-bot-yinh {
      width: 12px;
      height: 12px;
      text-align: left;
      float: left;
      position: relative;
      left: 0;
      top: 10px;
    }

    .modal-bot-line {
      border-top: 1px solid #fff;
      opacity: .21;
    }

    .bodal-bot-content {
      font-size: 14px;
      font-weight: 400;
      color: #fff;
      letter-spacing: 2px;
      text-align: left;
      padding: 20px 10px 0;
    }

    .gettop {
      position: relative;
      width: 600px;
    }

    .loading-pay {
      position: absolute;
      left: 0;
      top: 0;
      width: 600px;
      height: 530px;
      background: white;
      z-index: 9;
    }

    .getheader {
      height: 50px;
      line-height: 50px;
    }

    .getorder {
      font-size: 18px;
      font-weight: 700;
      line-height: 50px;
      color: #353535;
      text-align: center;
    }

    .getheadercha {
      width: 24px;
      height: 24px;
      float: right;
      position: relative;
      left: 0;
      top: -36px;
      cursor: pointer;
    }

    .cpanp {
      height: 300px;
      padding: 10px 0 0 50px;
    }

    .cpanp, .cpanp-left {
      display: flex;
    }

    .cpanp {
      flex-direction: row;
      justify-content: space-between;
    }

    .cpanp-left {
      flex-direction: column;
      justify-content: flex-start;
      text-align: left;
    }

    .cpanp, .cpanp-left {
      display: flex;
    }

    .cpanp-name {
      font-weight: 700 !important;
      margin: 8px 0;
    }

    .mtop {
      position: relative;
      left: 0;
      top: -1px;
    }

    .cpanp-name {
      color: #353535;
      font-size: 16px;
      min-width: 240px;
      height: 30px;
      line-height: 30px;
    }

    .weichatpay {
      width: 20px;
      height: 20px;
      position: relative;
      left: 0;
      top: -3px;
    }

    .cpanp-right {
      min-height: 200px;
    }

    .cpanp-right {
      width: 42%;
      text-align: center;
    }

    .buy-qrcode {
      width: 170px;
      height: 170px;
    }

    .buy-qrcode {
      width: 134px;
      height: 134px;
      min-width: 134px;
      min-height: 134px;
      text-align: center;
      margin: 50px auto 15px;
    }

    .qrcode-sao {
      color: #353535;
      font-size: 14px;
    }

    .modal-link {
      background-color: #707070;
      width: 530px;
      height: 1px;
      margin: 0 50px;
      opacity: .21;
    }

    .zhifurenz {
      margin-top: 20px;
      justify-content: space-between;
    }

    .zhifulogo, .zhifurenz {
      display: flex;
      flex-direction: row;
    }

    .zhifuall {
      display: flex;
      flex-direction: row;
      text-align: left;
      padding: 0 50px;
      margin-top: 12px;
    }

    .getqiangjin {
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      color: #353535;
      opacity: 1;
      text-align: left;
      padding: 0 0 0 72px;
    }

    .zhifudun {
      width: 16px;
      height: 16px;
      position: relative;
      left: 0;
      top: 5px;
      margin-right: 5px;
    }

    .zhidusan {
      font-size: 16px;
      font-weight: 700;
      line-height: 28px;
    }

    .zhifulogo > img {
      width: 240px;
    }

    img {
      border: 0;
    }

    img {
      vertical-align: middle;
      border-style: none;
    }

    .prbuttons {
      text-align: right;
      margin-top: 20px;
    }
  }
</style>
